<template>
  <div class="scrollTable">
    <div class="list" v-scroll-table="{ scroll: 100 }">
      <div class="list_scroll_wrap">
        <div class="list_item" v-for="(item, index) in data" :key="index">
          姓名：{{ item.name }}-年龄 {{ item.age }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const data = ref([
  { id: 1, name: "Ren", age: 18 },
  { id: 2, name: "Ning", age: 19 },
  { id: 3, name: "Ning", age: 19 },
  { id: 4, name: "Ning", age: 19 },
  { id: 5, name: "Ning", age: 19 },
  { id: 6, name: "Ning", age: 19 },
  { id: 7, name: "Ning", age: 19 },
  { id: 8, name: "Ning", age: 19 },
  { id: 9, name: "Ning", age: 19 },
  { id: 10, name: "Ning", age: 19 },
  { id: 11, name: "Ning", age: 19 },
  { id: 12, name: "Ning", age: 19 },
  { id: 13, name: "Ning", age: 19 }
]);
</script>

<style lang="less" scoped>
.scrollTable {
  overflow: hidden;
  height: 100%;
  background: #eee;
  .list {
    margin: auto;
    margin-top: 20px;
    width: 500px;
    height: 200px;
    background: #aaa;
    .list_item {
      background: rgba(255, 0, 0, 0.2);
    }
  }
}
</style>
